<template>
  <div>
    <Card dis-hover>

      <Row>
        <Col span="24" style="text-align: right;">
          <Button :disabled="!hasPermission('Pages.Administration.Maintenances.Clear')" icon="logo-buffer"
                  style="margin-right:10px;"
                  type="primary" @click="clearAll">清除全部缓冲
          </Button>
          <Button :disabled="!hasPermission('Pages.Administration.Maintenances.Export')" icon="md-cloud-download"
                  style="margin-right:10px;"
                  type="info" @click="download">下载全部日志
          </Button>
          <Button icon="md-refresh" type="success" @click="refresh">刷新</Button>
        </Col>
      </Row>

      <div
          style="padding:2px;width:100%;height:calc(100vh - 218px);border:1px solid #e8eaec;background-color:#f8f8f9;overflow:auto;margin-top:10px;"
          class="beautiful-bar">
        <span v-html="getFormattedLogs(logList)"></span>

      </div>

    </Card>
  </div>

</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import Util from '@/lib/util';

@Component({
  components: {},
})
export default class Maintenance extends AbpBase {
  name: string = 'Maintenance';

  columns = [
    {
      title: '程序缓冲名称',
      key: 'name',
      align: 'left',
    },
    {
      title: '操作',
      align: 'center',
      width: 100,
      slot: 'actions',
    },
  ];

  get cacheList() {
    return this.$store.state.cache.list;
  }

  get loading() {
    return this.$store.state.log.loading;
  }

  get logList() {
    return this.$store.state.log.list;
  }


  get zipFile() {
    return this.$store.state.log.zipFile;
  }

  async clearAll() {
    await this.$store.dispatch({
      type: 'cache/clearAllCaches',
    });
    this.$Message.success({
      background: true,
      content: '全部程序缓冲已清除成功',
      duration: this.$config.duration,
    });
  }

  async clear(row: any) {
    await this.$store.dispatch({
      type: 'cache/clearCache',
      data: {
        id: row.name,
      },
    });
    this.$Message.success({
      background: true,
      content: '程序缓冲 ' + row.name + ' 已清除成功',
      duration: this.$config.duration,
    });
  }

  getFormattedLogs(logLines: string[]) {
    let resultHtml = '';
    logLines.forEach((item) => {
      resultHtml += '<span><pre style="margin:0;">' + item
          .replace(/^DEBUG/, '<span class="log-tag log-color-success">DEBUG</span>')
          .replace(/^INFO/, '<span class="log-tag log-color-info">INFO</span>')
          .replace(/^WARN/, '<span class="log-tag log-color-warning">WARN</span>')
          .replace(/^ERROR/, '<span class="log-tag log-color-error">ERROR</span>')
          .replace(/^FATAL/, '<span class="log-tag log-color-fatal">FATAL</span>') + '</pre></span>';
    });
    return resultHtml;
  }

  async download() {
    await this.$store.dispatch({
      type: 'log/downloadWebLogs',
    });
    if (this.hasPermission('Pages.Files.Download')) {
      Util.downloadWithToken('/api/File/DownloadTempFile?fileType=' + this.zipFile.fileType + '&fileToken=' + this.zipFile.fileToken + '&fileName=' + this.zipFile.fileName, this.zipFile.fileName, this.zipFile.fileType);
    } else {
      this.$Message.error({
        background: true,
        content: '下载失败，缺少文件下载权限',
        duration: this.$config.duration,
      });
    }
  }

  async refresh() {
    await this.$store.dispatch({
      type: 'log/getLatestWebLogs',
    });
  }

  async created() {
    await this.$store.dispatch({
      type: 'cache/getAllCaches',
    });
    await this.$store.dispatch({
      type: 'log/getLatestWebLogs',
    });
  }
}
</script>

<style lang="less">
.log-tag {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  margin: 2px 4px 2px 0;
  padding: 0 8px;
  border: 1px solid #e8eaec;
  border-radius: 3px;
  font-size: 12px;
  vertical-align: middle;
  opacity: 1;
  overflow: hidden;
}

.log-color-success {
  color: #fff !important;
  border-color: #19be6b;
  background-color: #19be6b;
}

.log-color-info {
  color: #fff !important;
  border-color: #2db7f5;
  background-color: #2db7f5;
}

.log-color-primary {
  color: #fff !important;
  border-color: #2d8cf0;
  background-color: #2d8cf0;
}

.log-color-warning {
  color: #fff !important;
  border-color: #f90;
  background-color: #f90;
}

.log-color-error {
  color: #fff !important;
  border-color: #ed4014;
  background-color: #ed4014;
}

.log-color-fatal {
  color: #fff !important;
  border-color: #ed4014;
  background-color: #ff0000;
}

</style>
